<template>
  <PageContainer>
    <view class="container">
      <Header title="新建相册" v-model="headerHeight" />
      <view class="disFlxCC bgf" :style="`height: calc(100vh - ${headerHeight}px);`">
        <image :src="addSuccessIcon" style="width: 224rpx; height: 224rpx" />
        <view class="fz-19 fw-7 mt-19 mb-31">相册新建成功</view>
        <view class="mt-50" style="width: calc(100% - 60rpx)">
          <TButton
            class="gutter-btn"
            text="分享相册"
            open-type="share"
            type="primary"
            @click="openShare"
          />
          <TButton class="gutter-btn" custom-class="coopClose" text="查看详情" @click="goDetails" />
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* addPhotosSuccess 新建相册 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { addSuccessSVG } from '../components/photosIcon';
  import { svgToDataUrl } from '@/utils/index';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { ref, unref } from 'vue';
  import { onLoad, redirectTo } from '@/router';
  import { onShareAppMessage } from '@dcloudio/uni-app';
  import { photoAlbumDetails } from '@/api/admin/index';
  import type { PhotoAlbumListResult } from '@/api/photoAlbum/types';
  import { useAppShare } from '@/hooks/core/useAppShare';

  const { setWxSharePath } = useAppShare();
  const addSuccessIcon = svgToDataUrl(addSuccessSVG);
  const headerHeight = ref(0);
  const id = ref<number>();

  onLoad((op) => {
    id.value = op.id;
    getDetails();
  });

  const photoAlbumInfo = ref<PhotoAlbumListResult>();
  const getDetails = () => {
    photoAlbumDetails(unref(id) as number).then((res) => {
      photoAlbumInfo.value = res;
    });
  };

  const showShare = ref(false);
  const openShare = () => {
    showShare.value = true;
  };

  onShareAppMessage(() => ({
    imageUrl: unref(photoAlbumInfo)?.originalCoverUrl ?? unref(photoAlbumInfo)?.coverUrl, // 封面
    path: setWxSharePath({ name: 'photoAlbumDetails', options: { id: unref(id) as number } }),
    title: unref(photoAlbumInfo)?.name,
  }));

  const goDetails = () => {
    redirectTo({ name: 'photosDetails', options: { id: unref(id) as number } });
  };
</script>

<style lang="scss" scoped></style>
